<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>接地电阻记录</title>
    <!--框架必需start-->
    <script type="text/javascript" src="../../libs/js/jquery.js"></script>
    <script type="text/javascript" src="../../libs/js/language/cn.js"></script>
    <script type="text/javascript" src="../../libs/js/framework.js"></script>
    <link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" type="text/css" id="skin" prePath="../../"/>
    <link rel="stylesheet" type="text/css" id="customSkin"/>
    <!--框架必需end-->
    <link rel="stylesheet" type="text/css" href="../../sample_skin/demo/style/style.css"/>

    <script src="../../libs/js/table/quiGrid.js" type="text/javascript"></script>

    <!--基本选项卡start-->
    <script type="text/javascript" src="../../libs/js/nav/basicTab.js"></script>
    <!--基本选项卡end-->

    <!--self开始-->
    <link rel="stylesheet" href="../../assets/css/m_style.css" class="m_style">
    <script type="text/javascript" src="../../assets/js/echarts.min.js"></script>
    <script type="text/javascript" src="../../assets/js/utils.js"></script>
    <!--self结束-->
</head>

<body>
<div class="m_pos">
    <img src="../../assets/images/position.png" alt="" class="m_position">
    <span>当前页面：</span>
    <span class="m_pos_local">接地电阻记录</span>
</div>
<div class="page_content">
    <div class="m_light_waveform">
        <div class="m_lw_top">
            <p class="m_lw_name">近7天接地电阻记录</p>
            <ul class="m_lw_slide">
                <li class="m_lw_slide_focus">7天</li>
                <li>30天</li>
            </ul>
        </div>
        <div id="spendingComparedAnalysis"></div>
    </div>
    <div class="infoCard infoCard2">
        <div class="m_lw_table">
            <div id="dataBasic"></div>
        </div>
    </div>
</div>

<script type="text/javascript">

   var  ctr =   "http://www.chinalightning.com.cn/api/ground_resistance/";
     var gridData = {
         "form.paginate.pageNo": 1,
         "form.paginate.totalRows": 13
     };
     var last30DaysValue=new Array(30).fill(0);
     var last30Days=[];

   $.get(ctr, function (res) {
       if (res!=400){
           var data=res.message;
            var res=[];
           data.forEach((value,key)=>{
               var convertData={};
               convertData.num=value["设备编号"];
               convertData.state=value["在线状态"];
               var num=value["接地电阻值"];
               convertData.resistance=num;
               var day=value["安装日期"];
               convertData.safe=value["安全阀值"];
               convertData.date=day;
               convertData.next_date=value["检测日期"];
               convertData.dir=value["维护记录"];
               res.push(convertData);

               if (key<30){
                   last30Days.push(value["日期"]);
                   last30DaysValue[key]=parseFloat(num.replace("欧姆",""));
               }

           })
           gridData.rows=res;
           initComplete();
           if (last30Days.length<30){
               var len=last30Days.length;
               for (let i= len-1 ;i<29;i++){
                   last30Days[i+1]= addDate(last30Days[i],-1);
               }
           };
           spendingComparedAnalysis(7);


       }else{
           top.Dialog.alert("当前接地电阻无数据");
       }


   })
    var grid = null;
    //列表显示





    function initComplete() {
        grid = $("#dataBasic").quiGrid({
            columns: [{
                display: '设备编号',
                name: 'num',
                width: "15%",
                cellClick: true
            }, {
                display: '在线状态',
                name: 'state',
                width: "14.3%",
                render: function (rowdata, rowindex, value, column) {
                    if ("off"==value){
                        return "<span style='color: red'>"+value+"</span>"
                    }else{
                        return value;
                    }
                }
            }, {
                display: '接地电阻值',
                name: 'resistance',
                width: "14.3%",
            }, {
                display: '安全阀值',
                name: 'safe',
                width: "14.3%",
            }, {
                display: '安装日期',
                name: 'date',
                width: "14.3%",
            }, {
                display: '下一次检测日期',
                name: 'next_date',
                width: "15%",
            }, {
                display: '维护记录',
                name: 'dir',
                width: "14.3%",
            }
            ],
            data: gridData,
            sortName: 'id',
            rownumbers: false,
            checkbox: false,
            height: '100%',
            width: "100%",
            pageSize: 10,
            percentWidthMode: true,
            // onAfterShowData: onAfterShowData,
        });
    }

    function onAfterShowData(data) {

        $("#dataBasic").find(".popupMenu").each(function () {
            $(this).hover(function () {
                $(this).find(".popupMenu_con").show();
            }, function () {
                $(this).find(".popupMenu_con").hide();
            });
        })
    }
</script>
<script>
    //接地电阻记录

    // 切换
    $(".m_lw_slide>li").click(function () {
        var m_lw_num = $(this).index();
        if (m_lw_num == 0) {
            $(".m_lw_name").html("近7天接地电阻记录");
            spendingComparedAnalysis(7)
        } else {
            $(".m_lw_name").html("近30天接地电阻记录")
            spendingComparedAnalysis(30)
        }
        $(this).addClass("m_lw_slide_focus");
        $(this).siblings("li").removeClass("m_lw_slide_focus");
    })

    function spendingComparedAnalysis(va) {
        var value1,value2;
        if (va ==7){
            value1=last30Days.slice(0,7).reverse();
            value2=last30DaysValue.slice(0,7).reverse();
        }else{

            value1=last30Days.slice(0).reverse();
            value2=last30DaysValue.slice(0).reverse();
        }

        var myChart = echarts.init(document.getElementById('spendingComparedAnalysis'));
        option = {

            tooltip: {
                trigger: 'axis',
                color: '#007AFF',
                textStyle: {
                    color: '#fff'
                },

            },

            legend: {
                show: false,
                orient: 'vertical',
                right: '0',
                align: "left",
                top: "20",
                data: [
                    {name: '电阻值：', textStyle: {color: '#007AFF'}},
                ]
            },

            // 设置间距
            grid: [
                {x: 80, y: 10, x2: 30, y2: '20'}
            ],

            xAxis: {
                type: 'category',
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: '#eee',
                    }
                },
                // 取消刻度线
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    color: '#666'
                },
                axisLine: {
                    lineStyle: {
                        color: '#C8C8C8',
                    }
                },
                data: value1
            },
            yAxis: {
                type: 'value',
                //坐标轴内线的样式
                splitLine: {
                    lineStyle: {
                        color: '#eee',
                    }
                },
                // 取消刻度线
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#C8C8C8',
                    }
                },

                min: 0,
                max: function(value) {
                    return value.max + 0.1;
                },
                axisLabel: {
                    // formatter: '{value}.00%',
                    color: '#5e6472'

                }
            },
            series: [{
                data: value2,
                type: 'line',
                name: '电阻值',
                color: ['#4d96f7'],
                symbol: 'circle',
                symbolSize: 10,   //设定实心点的大小
                smooth: true,
                lineStyle: {
                    normal: {
                        width: 1
                    }
                },
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            formatter: '{c}'
                        }
                    }
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0, color: '#D9EBFF' // 0% 处的颜色
                        },
                        {
                            offset: 0.6, color: '#D9EBFF' // 100% 处的颜色

                        },
                        {
                            offset: 1, color: '#FFFFFF' // 100% 处的颜色

                        }

                    ]),


                }


            }]
        };
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
    }

</script>
</body>

</html>
